<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
</head>
<style>
	@keyframes spin {
		0% {
			transform: rotate(-30deg) scaleY(.5) rotate(0deg);
		}

		100% {
			transform: rotate(-30deg) scaleY(.5) rotate(360deg);
		}
	}

	@keyframes anti-spin {
		0% {
			transform: rotate(0deg) scaleY(2) rotate(30deg) scale(1);
		}

		100% {
			transform: rotate(-360deg) scaleY(2) rotate(30deg) scale(1);
		}
	}

	.box {
		position: relative;
		padding: 50px;
		width: 250px;
		height: 250px;
		border-radius: 50%;
		background-size: 100% 100%;
		background: pink;
		border: 1px solid;
		background-image: linear-gradient(270deg, rgba(220, 155, 71, 0.06), rgba(220, 155, 71, 1), rgba(185, 114, 52, 1)) 1 1;
		animation: spin 3s infinite linear;
	}

	.box .ball {
		display: inline-block;
		background: blue;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		animation: anti-spin 3s infinite linear;
		color: #fff;
		position: absolute;
		text-align: center;
	}

	.box .ball.ball1 {
		left: 45px;
		top: 45px;
	}

	.box .ball.ball2 {
		right: 45px;
		top: 45px;
	}

	.box .ball.ball3 {
		right: 45px;
		bottom: 45px;
	}

	.box .ball.ball4 {
		left: 45px;
		bottom: 45px;
	}

	.box:hover,
	.box:hover .ball,
	.box .ball:hover {
		animation-play-state: paused;
	}


	.sleepContentView {
		width: 75px;
		height: 75px;
		background-image: linear-gradient(177deg, rgba(220, 155, 71, 0.06), rgba(220, 155, 71, 1), rgba(185, 114, 52, 1));
		border-radius: 50%;
		padding: 2px;
		box-sizing: border-box;
		transform: rotate(89deg) rotateY(58deg);
	}

	.sleepContentView .circle {
		width: 100%;
		height: 100%;
		background: #fff;
		border-radius: 50%;
	}
</style>

<body>
	<div class="box">
		<div class="ball ball1">1</div>
		<div class="ball ball2">2</div>
		<div class="ball ball3">3</div>
		<div class="ball ball4">4</div>
	</div>



	<div class="sleepContentView">
		<div class="circle" />
	</div>

</html>